
import {getClassNames} from "./until"

class View{
    constructor(Config){   
        this.Config=Config;   
        this.reLoad=this.reLoad.bind(this);  
        this.onImageChange=this.onImageChange.bind(this);
        this.renderImage=this.renderImage.bind(this);
        this.init=this.init.bind(this);
        this.readFile=this.readFile.bind(this);
        this.initInput=this.initInput.bind(this);
    }

    

    onImageChange(elemToCheck){  
        //var elemToCheck =document.getElementById("fileUpLoadBox");
        // Firefox和Chrome早期版本中带有前缀
        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
        // 选择目标节点
        var target =elemToCheck;           
        var observer = new MutationObserver(this.reLoad); 
        // 配置观察选项:
        var config = { attributes: true, childList: false, characterData: false,attributeFilter:["imagesdata"]} 
        // 传入目标节点和观察选项
        observer.observe(target, config); 
        //停止观察
        // observer.disconnect();      
    }


    init(){  
        let elements=getClassNames("file-up-load-item","div");
     
        for(var i=0;i<elements.length;i++){
             this.onImageChange(elements[i]);
        }
      this.initInput();
    }

    initInput(){            
          document.getElementById('input-parent').innerHTML='<input id="fileUp-input" type="file" accept=""  style="display: none;"/>';     
          document.getElementById('fileUp-input').onchange=function(){
              this.readFile();
          };
           
     } 
    readFile(){
            var inputFile=document.getElementById("fileUpLoadBox");          
            var file = this.files[0];         
            // document.getElementById('input-parent').onload=initInput;
            //判断是否是图片类型
            if(!/image\/\w+/.test(file.type)){ 
                    alert("只能选择图片");
                    return false;
            }
            var reader = new FileReader();
          
            reader.readAsDataURL(file);          
            reader.onload = function(e){                            
                document.getElementById("picBox").innerHTML=document.getElementById("picBox").inerHTML+this.renderImage({src:this.result});
                setTimeout(initInput,200); 
            }              
           
       
    }

    reLoad(){    
        var elements=getClassNames("file-up-load-item","div"); 
        var imageList=elements.map((item)=>JSON.parse(item.getAttribute("imagesdata")));
       // var imageList=JSON.parse(document.getElementById("fileUpLoadBox").getAttribute("imagesdata"));           
        this.Config.element.fileBox.innerHTML=this.render(imageList);     
    }




    renderImage(image){      
       var  div= ` 
            <div class="ant-upload-list ant-upload-list-picture-card file-up-load-item"  imagesdata=${JSON.stringify(image)}>
            <div class="ant-upload-list-item ant-upload-list-item-done">
            <div class="ant-upload-list-item-info">
                <span>
                    <a class="ant-upload-list-item-thumbnail" href="${image.src}" target="_blank" rel="noopener noreferrer">
                        <img src="${image.src}" alt="xxx.png">
                    </a>
                    <a href="${image.src}" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name" title="xxx.png">xxx.png</a>
                </span>
            </div>
            <span class="ant-upload-list-item-actions"><a href="${image.src}" target="_blank" rel="noopener noreferrer" title="Preview file"><i class="anticon anticon-eye-o"></i></a><i title="Remove file" class="anticon anticon-delete"></i></span>      
            </div>
            </div>`;

            return div;
    }

    inputClick(){
       return `document.getElementById('fileUp-input').click()`;      
    }
    render(imageList){
        let imgsHtml="";      
       if(imageList.length>=1){
            imgsHtml=imageList.map(item=>this.renderImage(item)); 
       }     
        return` 
       <section  class="code-box-demo" id='fileUpLoadBox'> 
        <div class="clearfix">   
           <div id="picBox">
                 ${imgsHtml} 
           </div>       
            <div class="ant-upload ant-upload-select ant-upload-select-picture-card" onclick="${this.inputClick()}">
            <span tabindex="0" class="ant-upload" role="button">
                <span id="input-parent">
                 <input id="fileUp-input" type="file" accept="" style="display: none;" />
                </span>
            <div>
                <i class="anticon anticon-plus"></i>
                <div class="ant-upload-text">
                上传图片
                </div>
            </div></span>
            </div></span>  
        </div>
      </section>`;
    }
}

export {View}
